import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Quick.UIComponent.Button 0.1
import Quick.UIComponent.Button.Simple 0.1 as Simple


Page {
    title: "Button"



    RowLayout{
        anchors.fill: parent
        TextArea{
            Layout.preferredWidth: 260
            Layout.fillHeight: true
            id:show
        }
        Container{
            Layout.fillHeight: true
            Layout.fillWidth:  true
            id:control
            contentItem: Flow{
                spacing: 20
                Repeater{
                    model: control.children

                }

            }

            Column{
                Layout.preferredWidth:120
                Layout.preferredHeight:  120
                Button{
                    width: 120
                    height: width
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: qsTr("系统自带")
                    onClicked: {
                        setShown()
                    }
                    ToolTip.delay: 1000
                    ToolTip.timeout: 5000
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
                }
                Label{
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "系统自带"
                }
            }

            Column {
                Layout.preferredWidth: 120
                Layout.preferredHeight: 120
                Button {
                    width: 120
                    height: width
                    icon.source: "qrc:/image/icons/error.svg"
                    text: qsTr("清空显示")
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: show.clear()
                }

                Label {
                    text: "系统自带"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            Column {
                width: 120
                Layout.preferredHeight: 120
                Button {
                    width: 120
                    height: width
                    icon.source: "qrc:/image/icons/error.svg"
                    text: qsTr("系统自带")
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                    ToolTip.delay: 1000
                    ToolTip.timeout: 5000
                    ToolTip.visible: hovered
                    ToolTip.text: qsTr("This tool tip is shown after hovering the button for a second.")
                }

                Label {
                    text: "系统自带"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            Column {
                width: 120
                Layout.preferredHeight: 120
                Simple.Button {
                    width: 120
                    height: width
                    icon.source: "qrc:/image/icons/error.svg"
                    text: qsTr("系统例子")
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                }

                Label {
                    text: "系统自带"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }


            Column {
                width: 120
                Layout.preferredHeight: 120
                CicleButton {
                    width: 120
                    height: width
                    text: qsTr("我是文本")
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                }

                Label {
                    text: "圆形按钮"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            Column {
                width: 120
                Layout.preferredHeight: 120
                MSvgBtn {
                    width: 120
                    height: width
                    text: qsTr("我是文本")
                    source: "qrc:/image/icons/error.svg"
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                }

                Label {
                    text: "图像按钮"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            Column {
                width: 120
                Layout.preferredHeight: 120
                RectBtn {
                    width: 120
                    height: width
                    text: qsTr("我是文本")
                    radius: 20
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                }

                Label {
                    text: "弧度按钮"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }


            Column {
                width: 120
                Layout.preferredHeight: 80
                LineButton {
                    width: 120
                    height: width
                    btnName: qsTr("我是文本")
                    anchors.horizontalCenter: parent.horizontalCenter
                    onClicked: setShown()
                }

                Label {
                    text: "line按钮"
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
            Column {
                width: 120
                Layout.preferredHeight: 80
                RoundButton {
                  text: "\u2713" // Unicode Character 'CHECK MARK'
                  onClicked:  setShown()
                }

                Label {
                    text: "Round按钮"
                    anchors.horizontalCenter: parent.horizontalCenter
                }

            }



        }
    }




    function setShown(){
        show.append("您进行了点击操作!")
    }

}



















/*##^## Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
 ##^##*/
